<template>
    <div class="page-card">
        <el-form ref="formRef" :model="dataForm" :rules="rules" label-width="180px">
            <el-form-item label="bucket" prop="bucket" required>
                <el-input v-model="dataForm.bucket" style="width: 500px;" />
            </el-form-item>
            <el-form-item label="access_key" prop="access_key" required>
                <el-input v-model="dataForm.access_key" style="width: 500px;" />
            </el-form-item>
            <el-form-item label="secret_key" prop="secret_key" required>
                <el-input v-model="dataForm.secret_key" style="width: 500px;" />
            </el-form-item>
            <el-form-item label="domain" prop="domain" required>
                <el-input v-model="dataForm.domain" style="width: 500px;" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit(formRef)">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { getSystemInfo, systemSave } from '@/api/seting'

const dataForm = reactive({
    bucket: '',
    access_key: '',
    secret_key: '',
    domain: ''
})

const formRef = ref(null)

const rules = reactive({
    bucket: [{ required: true, message: '请填写bucket', trigger: 'blur' }],
    access_key: [{ required: true, message: '请填写access_key', trigger: 'blur' }],
    secret_key: [{ required: true, message: '请填写secret_key', trigger: 'blur' }],
    domain: [{ required: true, message: '请填写domain', trigger: 'blur' }]
})

onMounted(() => {
    getMiniappInfo();
})

function getMiniappInfo() {
    getSystemInfo({
        name: 'storage_config'
    }).then(res => {
        dataForm.bucket = res.result.bucket;
        dataForm.access_key = res.result.access_key;
        dataForm.secret_key = res.result.secret_key;
        dataForm.domain = res.result.domain;
    })
}

function onSubmit(formEl) {
    formEl.validate((valid) => {
        if (valid) {
            systemSave({
                name:'storage_config',
                value:dataForm
            }).then(res => {
                if (res.code == 1) {
                    ElMessage.success("保存成功");
                }
            })
        } else {
            return false
        }
    })
}
</script>
<style>

</style>